<template>
	<view>
		<view style="width: 600rpx;margin: auto;margin-top: 50rpx;">
			<u-form :model="form" ref="uForm" :rules="rules" label-width="200" :error-type="errorType">
				<u-form-item required="true" label="岗位名称:" prop="vacancyName">
					<u-input v-model="form.vacancyName" input-align="right" placeholder="请输入岗位名称" />
				</u-form-item>

				<u-form-item required="true" label="联系人:" prop="posterName">
					<u-input disabled="true" input-align="right" v-model="form.posterName" placeholder="请输入联系人姓名" />
				</u-form-item>

				<u-form-item required="true" label="联系方式:" prop="phone">
					<u-input disabled="true" input-align="right" v-model="form.phone" placeholder="请输入手机号码"
						type="number" />
				</u-form-item>

				<u-form-item required="true" label="薪资范围:" prop="salary">
					<u-input v-model="form.salary" input-align="right" placeholder="例如：5K-8K" />
				</u-form-item>

				<u-form-item required="true" label="紧急程度:" prop="level">
					<u-input v-model="form.level" type="select" input-align="right" @click="show=!show"
						placeholder="请选择紧急程度" />
					<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
				</u-form-item>
				<u-form-item required="true" label="岗位要求:" prop="detailed" label-position="top">
					<u-input v-model="form.detailed" type="textarea" :height="300" :auto-height="autoHeight" />
				</u-form-item>
			</u-form>
		</view>
		<view style="margin: 100rpx;">
			<button @click="submitForm" class="contact-btn">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		create,
		detail,
		save
	} from '../../utils/api/modules/vacancy';

	export default {
		data() {
			return {
				errorType: ['toast', 'border-bottom'], //同时启用两种错误提示
				form: {
					vacancyName: '',
					posterName: '',
					phone: '',
					detailed: '',
					salary: '',
					level: ''
				},
				addParam: {
					vacancyName: "",
					companyId: "",
					detailed: "",
					salary: "",
					level: "",
					posterId: ""
				},
				show: false,
				list: [{
						value: 'LOW',
						label: '普通'
					},
					{
						value: 'MEDIUM',
						label: '较紧急'
					},
					{
						value: 'HIGH',
						label: '紧急'
					}
				],
				rules: {
					vacancyName: [{
						required: true,
						message: '请输入岗位名称',
						trigger: 'blur'
					}, ],
					detailed: [{
							required: true,
							message: '请输入岗位要求',
							trigger: 'blur'
						},
						{
							min: 10,
							message: '岗位要求不得少于十个字符',
							trigger: 'blur'
						}
					],
					salary: [{
						required: true,
						message: '请输入薪资范围',
						trigger: 'blur'
					}],
					level: [{
						required: true,
						message: '请选择紧急程度',
						trigger: 'change'
					}]
				},
				isEdit: false,
				vacancyId: ''
			}
		},
		methods: {
			submitForm() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.addParam.detailed = this.form.detailed;
						this.addParam.salary = this.form.salary;
						this.addParam.vacancyName = this.form.vacancyName;
						
						if (this.isEdit) {
							// 编辑模式
							this.addParam.id = this.vacancyId;
							save(this.addParam)
								.then(res => {
									uni.showToast({
										title: '更新成功',
										icon: 'success'
									});
									uni.$emit('refreshVacancyList');
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								})
								.catch(err => {
									console.log(err);
									uni.showToast({
										title: '更新失败',
										icon: 'none'
									});
								});
						} else {
							// 新增模式
							create(this.addParam)
								.then(res => {
									uni.showToast({
										title: '发布成功',
										icon: 'success'
									});
									uni.$emit('refreshVacancyList');
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/mine/posted-jobs`
										});
									}, 1500);
								})
								.catch(err => {
									console.log(err);
									uni.showToast({
										title: '发布失败',
										icon: 'none'
									});
								});
						}
					}
				});
			},
			confirm(e) {
				this.form.level = e[0].label;
				this.addParam.level = e[0].value;
			},
			// 获取岗位详情
			async getVacancyDetail(id) {
				try {
					const res = await detail({ id });
					const vacancy = res.data;
					
					// 填充表单数据
					this.form.vacancyName = vacancy.vacancyName;
					this.form.detailed = vacancy.detailed;
					this.form.salary = vacancy.salary;
					this.form.level = this.getLevelLabel(vacancy.level);
					this.addParam.level = vacancy.level;
					
					// 设置其他参数
					this.addParam.companyId = vacancy.companyId;
					this.addParam.posterId = vacancy.posterId;
				} catch (error) {
					console.error('获取岗位详情失败:', error);
					uni.showToast({
						title: '获取岗位详情失败',
						icon: 'none'
					});
				}
			},
			// 根据level值获取对应的label
			getLevelLabel(level) {
				const levelMap = {
					'LOW': '普通',
					'MEDIUM': '较紧急',
					'HIGH': '紧急'
				};
				return levelMap[level] || '普通';
			}
		},
		onLoad(options) {
			// 设置用户信息
			const user = uni.getStorageSync('user');
			this.form.phone = user.phone;
			this.form.posterName = user.nickName;
			this.addParam.companyId = user.companyId;
			this.addParam.posterId = user.id;
			
			// 判断是否是编辑模式
			if (options.id) {
				this.isEdit = true;
				this.vacancyId = options.id;
				this.getVacancyDetail(options.id);
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	/* 可以添加一些自定义样式 */
	.u-form-item {
		margin-bottom: 20rpx;
	}

	.contact-btn {
		width: 100%;
		background-color: #54bcbd !important;
		color: white !important;
		border-radius: 10;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		margin: 0;
		/* 移除默认 margin */
		padding: 0;
		/* 移除默认 padding */
	}
</style>